<template>
  <div class="box">
    <img :src="banners.img" alt="" />
    <p>{{ banners.nm||banners.title }}</p>
    <b v-if="banners.globalReleased">观众评分&nbsp;&nbsp;{{ banners.sc }}</b>
    <b v-if="!banners.globalReleased||banners.sc=='0'">{{ banners.wish }}人想看</b>
    <p>{{banners.comingTitle}}</p>
  </div>
</template>

<script setup>
defineProps({
  banners: {
    required: true,
  },
});
</script>

<style lang="scss" scoped>
.box {
  margin-right: 10rem;
  width: 90rem;
  height: 120rem;
  position: relative;
  p{
    width: 90rem;
    overflow: hidden; // 溢出隐藏
    white-space: nowrap; // 强制一行
    text-overflow: ellipsis; // 文字溢出显示省略号
    font-size: 13px;
    color: #222;
    margin: 0 0 3px;
    font-weight: bold;
  }
  img {
    width: 100%;
    height: 100%;
  }
  b {
    position: absolute;
    left: 4px;
    bottom: 2px;
    color: #faaf00;
    font-size: 11px;
    font-weight: 600;
    
  }
}
</style>
